<template>
  <div class="delivery-detail" v-loading="loading">
    <div class="page-header">
      <h2>配送详情</h2>
      <el-button @click="$router.push('/deliveries')">返回配送列表</el-button>
    </div>
    
    <el-card v-if="delivery" class="box-card">
      <div slot="header" class="clearfix">
        <span>基本信息</span>
        <el-select v-model="delivery.status" style="float: right; width: 120px" size="mini" @change="updateDeliveryStatus">
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="delivery-info">
        <div class="info-item">
          <span class="label">配送编号:</span>
          <span class="value">{{ delivery.deliveryId }}</span>
        </div>
        <div class="info-item">
          <span class="label">订单编号:</span>
          <span class="value">{{ delivery.orderId }}</span>
        </div>
        <div class="info-item">
          <span class="label">配送地址:</span>
          <span class="value">{{ delivery.shippingAddress }}</span>
        </div>
        <div class="info-item">
          <span class="label">配送公司:</span>
          <span class="value">{{ delivery.carrier }}</span>
        </div>
        <div class="info-item">
          <span class="label">运单编号:</span>
          <span class="value">{{ delivery.trackingNumber || '无' }}</span>
        </div>
        <div class="info-item">
          <span class="label">配送状态:</span>
          <span class="value">
            <el-tag :type="getStatusType(delivery.status)">{{ getStatusText(delivery.status) }}</el-tag>
          </span>
        </div>
        <div class="info-item">
          <span class="label">预计送达:</span>
          <span class="value">{{ delivery.estimatedDelivery ? formatDate(delivery.estimatedDelivery) : '无' }}</span>
        </div>
        <div class="info-item">
          <span class="label">实际送达:</span>
          <span class="value">{{ delivery.actualDelivery ? formatDate(delivery.actualDelivery) : '未送达' }}</span>
        </div>
      </div>
    </el-card>
    
    <el-card v-if="order" class="box-card" style="margin-top: 20px">
      <div slot="header" class="clearfix">
        <span>关联订单信息</span>
        <el-button style="float: right;" type="text" @click="$router.push(`/orders/${order.orderId}`)">查看订单详情</el-button>
      </div>
      <div class="order-info">
        <div class="info-item">
          <span class="label">订单编号:</span>
          <span class="value">{{ order.orderId }}</span>
        </div>
        <div class="info-item">
          <span class="label">客户编号:</span>
          <span class="value">{{ order.customerId }}</span>
        </div>
        <div class="info-item">
          <span class="label">下单时间:</span>
          <span class="value">{{ formatDate(order.orderDate) }}</span>
        </div>
        <div class="info-item">
          <span class="label">订单金额:</span>
          <span class="value">{{ order.totalAmount }} 元</span>
        </div>
        <div class="info-item">
          <span class="label">订单状态:</span>
          <span class="value">
            <el-tag :type="getOrderStatusType(order.status)">{{ getOrderStatusText(order.status) }}</el-tag>
          </span>
        </div>
      </div>
    </el-card>
    
    <el-card class="box-card" style="margin-top: 20px">
      <div slot="header" class="clearfix">
        <span>更新配送信息</span>
      </div>
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="运单编号">
          <el-input v-model="form.trackingNumber" placeholder="请输入运单编号"></el-input>
        </el-form-item>
        <el-form-item label="配送状态">
          <el-select v-model="form.status" placeholder="请选择配送状态">
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预计送达">
          <el-date-picker
            v-model="form.estimatedDelivery"
            type="date"
            placeholder="选择预计送达日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="实际送达" v-if="form.status === 'delivered'">
          <el-date-picker
            v-model="form.actualDelivery"
            type="date"
            placeholder="选择实际送达日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">保存修改</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import deliveryApi from '@/api/delivery'
import orderApi from '@/api/order'
import moment from 'moment'

export default {
  name: 'DeliveryDetail',
  
  data() {
    return {
      loading: true,
      delivery: null,
      order: null,
      form: {
        deliveryId: null,
        trackingNumber: '',
        status: '',
        estimatedDelivery: null,
        actualDelivery: null
      },
      statusOptions: [
        { value: 'processing', label: '处理中' },
        { value: 'shipped', label: '已发货' },
        { value: 'in_transit', label: '运输中' },
        { value: 'delivered', label: '已送达' }
      ]
    }
  },
  
  created() {
    const deliveryId = this.$route.params.id
    if (deliveryId) {
      this.fetchDeliveryDetail(deliveryId)
    }
  },
  
  methods: {
    // 获取配送详情
    async fetchDeliveryDetail(deliveryId) {
      this.loading = true
      try {
        const response = await deliveryApi.getDelivery(deliveryId)
        this.delivery = response.data
        
        // 复制到表单
        this.form = {
          deliveryId: this.delivery.deliveryId,
          trackingNumber: this.delivery.trackingNumber || '',
          status: this.delivery.status,
          estimatedDelivery: this.delivery.estimatedDelivery ? new Date(this.delivery.estimatedDelivery) : null,
          actualDelivery: this.delivery.actualDelivery ? new Date(this.delivery.actualDelivery) : null
        }
        
        // 获取关联订单
        this.fetchOrder(this.delivery.orderId)
      } catch (error) {
        this.$message.error('获取配送详情失败')
        this.loading = false
      }
    },
    
    // 获取订单信息
    async fetchOrder(orderId) {
      try {
        const response = await orderApi.getOrder(orderId)
        this.order = response.data
        this.loading = false
      } catch (error) {
        this.$message.error('获取订单信息失败')
        this.loading = false
      }
    },
    
    // 更新配送状态
    async updateDeliveryStatus(status) {
      try {
        const response = await deliveryApi.updateDeliveryStatus(this.delivery.deliveryId, status)
        if (response.data.success) {
          this.$message.success(response.data.message)
          this.fetchDeliveryDetail(this.delivery.deliveryId)
        } else {
          this.$message.error(response.data.message)
        }
      } catch (error) {
        this.$message.error('更新配送状态失败')
      }
    },
    
    // 提交表单
    async submitForm() {
      try {
        const updatedDelivery = {
          ...this.form
        }
        
        const response = await deliveryApi.updateDelivery(this.delivery.deliveryId, updatedDelivery)
        if (response.data.success) {
          this.$message.success(response.data.message)
          this.fetchDeliveryDetail(this.delivery.deliveryId)
        } else {
          this.$message.error(response.data.message)
        }
      } catch (error) {
        this.$message.error('更新配送信息失败')
      }
    },
    
    // 格式化日期
    formatDate(date) {
      return moment(date).format('YYYY-MM-DD')
    },
    
    // 获取状态类型
    getStatusType(status) {
      const map = {
        'processing': 'info',
        'shipped': 'primary',
        'in_transit': 'warning',
        'delivered': 'success'
      }
      return map[status] || 'info'
    },
    
    // 获取状态文本
    getStatusText(status) {
      const map = {
        'processing': '处理中',
        'shipped': '已发货',
        'in_transit': '运输中',
        'delivered': '已送达'
      }
      return map[status] || status
    },
    
    // 获取订单状态类型
    getOrderStatusType(status) {
      const map = {
        'pending': 'info',
        'paid': 'success',
        'shipped': 'primary',
        'delivered': 'success',
        'cancelled': 'danger'
      }
      return map[status] || 'info'
    },
    
    // 获取订单状态文本
    getOrderStatusText(status) {
      const map = {
        'pending': '待处理',
        'paid': '已支付',
        'shipped': '已发货',
        'delivered': '已送达',
        'cancelled': '已取消'
      }
      return map[status] || status
    }
  }
}
</script>

<style scoped>
.delivery-detail {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.box-card {
  margin-bottom: 20px;
}

.info-item {
  margin-bottom: 10px;
  display: flex;
}

.label {
  width: 100px;
  color: #606266;
}

.value {
  color: #303133;
  font-weight: bold;
}

.el-form {
  max-width: 500px;
}
</style>